<template>
  <div class="low-code-designer">
    <el-container>
      <!-- 左侧组件库 -->
      <el-aside width="250px" class="components-panel">
        <el-tabs type="border-card">
          <el-tab-pane label="基础组件">
            <div class="component-list">
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'input')"
              >
                <el-icon><Edit /></el-icon>
                <span>输入框</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'textarea')"
              >
                <el-icon><Document /></el-icon>
                <span>文本域</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'number')"
              >
                <el-icon><DataAnalysis /></el-icon>
                <span>数字输入框</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'select')"
              >
                <el-icon><Collection /></el-icon>
                <span>选择器</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'date')"
              >
                <el-icon><Calendar /></el-icon>
                <span>日期选择</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'switch')"
              >
                <el-icon><Open /></el-icon>
                <span>开关</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="布局组件">
            <div class="component-list">
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'form')"
              >
                <el-icon><Document /></el-icon>
                <span>表单容器</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'table')"
              >
                <el-icon><Grid /></el-icon>
                <span>表格容器</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'search')"
              >
                <el-icon><Search /></el-icon>
                <span>搜索容器</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="自定义组件">
            <div class="component-list">
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'custom-button')"
              >
                <el-icon><Pointer /></el-icon>
                <span>自定义按钮</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'custom-card')"
              >
                <el-icon><CreditCard /></el-icon>
                <span>自定义卡片</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图表组件">
            <div class="component-list">
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'chart-2d')"
              >
                <el-icon><DataAnalysis /></el-icon>
                <span>2D图表</span>
              </div>
              <div 
                class="component-item"
                draggable="true"
                @dragstart="handleDragStart($event, 'chart-3d')"
              >
                <el-icon><Histogram /></el-icon>
                <span>3D图表</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-aside>

      <!-- 中间画布区域 -->
      <el-main class="canvas-panel">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>低代码设计器</span>
              <div class="actions">
                <el-button type="primary" @click="generateCode">生成代码</el-button>
                <el-button @click="previewPage">预览</el-button>
                <el-button @click="saveConfig">保存配置</el-button>
              </div>
            </div>
          </template>
          
          <div 
            class="design-canvas"
            @drop="handleDrop"
            @dragover="handleDragOver"
          >
            <draggable 
              v-model="components" 
              item-key="id"
              animation="200"
              group="components"
              handle=".drag-handle"
              @start="drag=true"
              @end="drag=false"
            >
              <template #item="{ element, index }">
                <div 
                  class="canvas-component"
                  :class="{ active: selectedIndex === index }"
                  @click="selectComponent(index)"
                >
                  <div class="component-toolbar">
                    <el-icon class="drag-handle"><Rank /></el-icon>
                    <el-icon @click.stop="copyComponent(index)"><CopyDocument /></el-icon>
                    <el-icon @click.stop="deleteComponent(index)"><Delete /></el-icon>
                  </div>
                  
                  <component 
                    :is="renderComponent(element)" 
                    :config="element.config"
                    :data="element.data"
                    :fields="element.fields"
                  />
                </div>
              </template>
            </draggable>
            
            <div v-if="components.length === 0" class="empty-canvas">
              <el-icon><Picture /></el-icon>
              <p>从左侧拖拽组件到此处</p>
            </div>
          </div>
        </el-card>
      </el-main>

      <!-- 右侧属性面板 -->
      <el-aside width="300px" class="properties-panel">
        <el-card v-if="selectedIndex !== null">
          <template #header>
            <div class="card-header">
              <span>属性配置</span>
            </div>
          </template>
          
          <div class="properties-form">
            <el-form label-position="top">
              <el-form-item label="组件类型">
                <el-input v-model="currentComponent.type" disabled></el-input>
              </el-form-item>
              
              <template v-if="currentComponent.type === 'form'">
                <el-form-item label="标签宽度">
                  <el-input v-model="currentComponent.config.labelWidth" placeholder="如: 100px"></el-input>
                </el-form-item>
                <el-form-item label="列数">
                  <el-input-number v-model="currentComponent.config.columns" :min="1" :max="4"></el-input-number>
                </el-form-item>
              </template>
              
              <template v-else-if="currentComponent.type === 'table'">
                <el-form-item label="显示序号">
                  <el-switch v-model="currentComponent.config.showIndex"></el-switch>
                </el-form-item>
                <el-form-item label="显示选择框">
                  <el-switch v-model="currentComponent.config.showSelection"></el-switch>
                </el-form-item>
                <el-form-item label="表格列配置">
                  <el-table :data="currentComponent.data.columns" style="width: 100%">
                    <el-table-column prop="prop" label="字段名" width="100">
                      <template #default="scope">
                        <el-input v-model="scope.row.prop" size="small"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="label" label="标签">
                      <template #default="scope">
                        <el-input v-model="scope.row.label" size="small"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60">
                      <template #default="scope">
                        <el-button 
                          type="danger" 
                          size="small" 
                          link 
                          @click="deleteTableColumn(scope.$index)"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button 
                    type="primary" 
                    size="small" 
                    style="margin-top: 10px"
                    @click="addTableColumn"
                  >
                    添加列
                  </el-button>
                </el-form-item>
              </template>
              
              <template v-else-if="currentComponent.type === 'search'">
                <el-form-item label="标签宽度">
                  <el-input v-model="currentComponent.config.labelWidth" placeholder="如: 80px"></el-input>
                </el-form-item>
                <el-form-item label="列数">
                  <el-input-number v-model="currentComponent.config.columns" :min="1" :max="4"></el-input-number>
                </el-form-item>
              </template>
              
              <template v-else-if="currentComponent.type.startsWith('custom-')">
                <el-form-item label="组件名称">
                  <el-input v-model="currentComponent.config.label" placeholder="组件显示名称"></el-input>
                </el-form-item>
                <el-form-item label="自定义属性">
                  <el-table :data="currentComponent.config.customProps" style="width: 100%">
                    <el-table-column prop="key" label="属性名" width="100">
                      <template #default="scope">
                        <el-input v-model="scope.row.key" size="small"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="value" label="属性值">
                      <template #default="scope">
                        <el-input v-model="scope.row.value" size="small"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60">
                      <template #default="scope">
                        <el-button 
                          type="danger" 
                          size="small" 
                          link 
                          @click="deleteCustomProp(scope.$index)"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button 
                    type="primary" 
                    size="small" 
                    style="margin-top: 10px"
                    @click="addCustomProp"
                  >
                    添加属性
                  </el-button>
                </el-form-item>
              </template>
              
              <template v-else-if="currentComponent.type === 'chart'">
                <el-form-item label="图表类型">
                  <el-select v-model="currentComponent.config.chartType" disabled>
                    <el-option label="2D图表" value="2d"></el-option>
                    <el-option label="3D图表" value="3d"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="图表配置">
                  <el-input 
                    v-model="currentComponent.config.option" 
                    type="textarea" 
                    :rows="10"
                    placeholder="请输入图表配置（JSON格式）"
                  />
                </el-form-item>
              </template>
              
              <template v-else>
                <el-form-item label="字段名">
                  <el-input v-model="currentComponent.config.prop" placeholder="字段名"></el-input>
                </el-form-item>
                <el-form-item label="标签">
                  <el-input v-model="currentComponent.config.label" placeholder="标签"></el-input>
                </el-form-item>
                
                <template v-if="currentComponent.type === 'input' || currentComponent.type === 'textarea'">
                  <el-form-item label="占位符">
                    <el-input v-model="currentComponent.config.placeholder" placeholder="占位符"></el-input>
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="currentComponent.config.required"></el-switch>
                  </el-form-item>
                </template>
                
                <template v-if="currentComponent.type === 'input'">
                  <el-form-item label="输入类型">
                    <el-select v-model="currentComponent.config.inputType" placeholder="请选择输入类型">
                      <el-option label="文本" value="text"></el-option>
                      <el-option label="密码" value="password"></el-option>
                      <el-option label="邮箱" value="email"></el-option>
                      <el-option label="数字" value="number"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
                
                <template v-else-if="currentComponent.type === 'textarea'">
                  <el-form-item label="行数">
                    <el-input-number v-model="currentComponent.config.rows" :min="2" :max="10"></el-input-number>
                  </el-form-item>
                </template>
                
                <template v-else-if="currentComponent.type === 'number'">
                  <el-form-item label="最小值">
                    <el-input-number v-model="currentComponent.config.min" :min="-999999" :max="999999"></el-input-number>
                  </el-form-item>
                  <el-form-item label="最大值">
                    <el-input-number v-model="currentComponent.config.max" :min="-999999" :max="999999"></el-input-number>
                  </el-form-item>
                  <el-form-item label="步长">
                    <el-input-number v-model="currentComponent.config.step" :min="0.1" :max="100" :step="0.1"></el-input-number>
                  </el-form-item>
                </template>
                
                <template v-else-if="currentComponent.type === 'select'">
                  <el-form-item label="占位符">
                    <el-input v-model="currentComponent.config.placeholder" placeholder="占位符"></el-input>
                  </el-form-item>
                  <el-form-item label="选项配置">
                    <el-table :data="currentComponent.config.options" style="width: 100%">
                      <el-table-column prop="label" label="标签">
                        <template #default="scope">
                          <el-input v-model="scope.row.label" size="small"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="value" label="值">
                        <template #default="scope">
                          <el-input v-model="scope.row.value" size="small"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="60">
                        <template #default="scope">
                          <el-button 
                            type="danger" 
                            size="small" 
                            link 
                            @click="deleteSelectOption(scope.$index)"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-button 
                      type="primary" 
                      size="small" 
                      style="margin-top: 10px"
                      @click="addSelectOption"
                    >
                      添加选项
                    </el-button>
                  </el-form-item>
                  <el-form-item label="是否多选">
                    <el-switch v-model="currentComponent.config.multiple"></el-switch>
                  </el-form-item>
                </template>
                
                <template v-else-if="currentComponent.type === 'date'">
                  <el-form-item label="日期类型">
                    <el-select v-model="currentComponent.config.dateType" placeholder="请选择日期类型">
                      <el-option label="日期" value="date"></el-option>
                      <el-option label="日期时间" value="datetime"></el-option>
                      <el-option label="日期范围" value="daterange"></el-option>
                      <el-option label="日期时间范围" value="datetimerange"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="格式">
                    <el-input v-model="currentComponent.config.format" placeholder="YYYY-MM-DD"></el-input>
                  </el-form-item>
                </template>
                
                <template v-else-if="currentComponent.type === 'switch'">
                  <el-form-item label="开启文本">
                    <el-input v-model="currentComponent.config.activeText" placeholder="开启时显示的文本"></el-input>
                  </el-form-item>
                  <el-form-item label="关闭文本">
                    <el-input v-model="currentComponent.config.inactiveText" placeholder="关闭时显示的文本"></el-input>
                  </el-form-item>
                  <el-form-item label="开启值">
                    <el-input v-model="currentComponent.config.activeValue" placeholder="开启时的值"></el-input>
                  </el-form-item>
                  <el-form-item label="关闭值">
                    <el-input v-model="currentComponent.config.inactiveValue" placeholder="关闭时的值"></el-input>
                  </el-form-item>
                </template>
              </template>
            </el-form>
          </div>
        </el-card>
        
        <el-card v-else>
          <template #header>
            <div class="card-header">
              <span>组件属性</span>
            </div>
          </template>
          <div class="no-selection">
            <p>请选择一个组件进行配置</p>
          </div>
        </el-card>
      </el-aside>
    </el-container>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="页面预览"
      width="80%"
      full-screen
    >
      <low-code-preview :config="components" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Edit, 
  Collection, 
  Calendar, 
  Open, 
  Document, 
  Grid, 
  Search, 
  Delete,
  Picture,
  Rank,
  CopyDocument,
  DataAnalysis,
  Pointer,
  CreditCard,
  Histogram
} from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import LowCodePreview from '@/components/LowCodePreview.vue'

// 组件数据
const components = ref([])
const selectedIndex = ref(null)
const previewVisible = ref(false)
const idCounter = ref(0)

// 当前选中组件
const currentComponent = computed(() => {
  return selectedIndex.value !== null ? components.value[selectedIndex.value] : null
})

// 处理拖拽开始
const handleDragStart = (event, type) => {
  event.dataTransfer.setData('componentType', type)
}

// 处理拖拽放置
const handleDrop = (event) => {
  event.preventDefault()
  const type = event.dataTransfer.getData('componentType')
  
  if (type) {
    const component = createComponent(type)
    components.value.push(component)
    selectComponent(components.value.length - 1)
  }
}

// 处理拖拽覆盖
const handleDragOver = (event) => {
  event.preventDefault()
}

// 创建组件
const createComponent = (type) => {
  const baseComponent = {
    id: idCounter.value++,
    type,
    config: {},
    data: {},
    fields: []
  }

  switch (type) {
    case 'input':
      return {
        ...baseComponent,
        config: {
          prop: `input_${idCounter.value}`,
          label: '输入框',
          placeholder: '请输入内容',
          required: false,
          inputType: 'text'
        }
      }
    case 'textarea':
      return {
        ...baseComponent,
        config: {
          prop: `textarea_${idCounter.value}`,
          label: '文本域',
          placeholder: '请输入内容',
          required: false,
          rows: 3
        }
      }
    case 'number':
      return {
        ...baseComponent,
        config: {
          prop: `number_${idCounter.value}`,
          label: '数字输入框',
          placeholder: '请输入数字',
          min: 0,
          max: 100,
          step: 1
        }
      }
    case 'select':
      return {
        ...baseComponent,
        config: {
          prop: `select_${idCounter.value}`,
          label: '选择器',
          placeholder: '请选择',
          options: [
            { label: '选项1', value: '1' },
            { label: '选项2', value: '2' }
          ],
          multiple: false
        }
      }
    case 'date':
      return {
        ...baseComponent,
        config: {
          prop: `date_${idCounter.value}`,
          label: '日期选择',
          placeholder: '请选择日期',
          dateType: 'date',
          format: 'YYYY-MM-DD'
        }
      }
    case 'switch':
      return {
        ...baseComponent,
        config: {
          prop: `switch_${idCounter.value}`,
          label: '开关',
          activeText: '开启',
          inactiveText: '关闭',
          activeValue: true,
          inactiveValue: false
        }
      }
    case 'form':
      return {
        ...baseComponent,
        config: {
          labelWidth: '100px',
          columns: 1
        }
      }
    case 'table':
      return {
        ...baseComponent,
        config: {
          showIndex: true,
          showSelection: true
        },
        data: {
          columns: [
            { prop: 'id', label: 'ID' },
            { prop: 'name', label: '名称' }
          ],
          data: [
            { id: 1, name: '示例数据1' },
            { id: 2, name: '示例数据2' }
          ]
        }
      }
    case 'search':
      return {
        ...baseComponent,
        config: {
          labelWidth: '80px',
          columns: 3
        }
      }
    case 'custom-button':
      return {
        ...baseComponent,
        config: {
          label: '自定义按钮',
          customProps: [
            { key: 'type', value: 'primary' },
            { key: 'size', value: 'default' }
          ]
        }
      }
    case 'custom-card':
      return {
        ...baseComponent,
        config: {
          label: '自定义卡片',
          customProps: [
            { key: 'shadow', value: 'always' }
          ]
        }
      }
    case 'chart-2d':
      return {
        ...baseComponent,
        type: 'chart',
        config: {
          chartType: '2d',
          label: '2D图表',
          chartLib: 'echarts',
          option: {
            title: {
              text: 'ECharts 2D 示例'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
              }
            ]
          }
        }
      }
    case 'chart-3d':
      return {
        ...baseComponent,
        type: 'chart',
        config: {
          chartType: '3d',
          label: '3D图表',
          chartLib: 'echarts',
          option: {
            title: {
              text: 'ECharts 3D 示例'
            },
            tooltip: {},
            xAxis3D: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis3D: {
              type: 'category',
              data: ['数据1', '数据2']
            },
            zAxis3D: {
              type: 'value'
            },
            grid3D: {},
            series: [
              {
                type: 'bar3D',
                data: [
                  [0, 0, 120],
                  [1, 0, 200],
                  [2, 0, 150],
                  [3, 0, 80],
                  [4, 0, 70],
                  [5, 0, 110],
                  [6, 0, 130],
                  [0, 1, 100],
                  [1, 1, 180],
                  [2, 1, 130],
                  [3, 1, 60],
                  [4, 1, 50],
                  [5, 1, 90],
                  [6, 1, 110]
                ],
                shading: 'color'
              }
            ]
          }
        }
      }
    default:
      return baseComponent
  }
}

// 渲染组件
const renderComponent = (component) => {
  // 根据组件类型返回对应的Element Plus组件
  switch (component.type) {
    case 'input':
      return 'el-input'
    case 'textarea':
      return 'el-input'
    case 'number':
      return 'el-input-number'
    case 'select':
      return 'el-select'
    case 'date':
      return 'el-date-picker'
    case 'switch':
      return 'el-switch'
    case 'form':
      return 'el-form'
    case 'table':
      return 'el-table'
    case 'search':
      return 'div'
    case 'custom-button':
      return 'el-button'
    case 'custom-card':
      return 'el-card'
    case 'chart':
      return 'div'
    default:
      return 'div'
  }
}

// 处理组件的属性
const getComponentProps = (component) => {
  const props = { ...component.config }
  
  // 为自定义组件添加特殊处理
  if (component.type.startsWith('custom-')) {
    // 将自定义属性转换为组件属性
    if (component.config.customProps) {
      component.config.customProps.forEach(prop => {
        if (prop.key && prop.value) {
          props[prop.key] = prop.value
        }
      })
    }
  }
  
  // 为图表组件添加特殊处理
  if (component.type === 'chart') {
    props.style = {
      width: '100%',
      height: component.config.height || '400px'
    }
  }
  
  return props
}

// 选择组件
const selectComponent = (index) => {
  selectedIndex.value = index
}

// 删除组件
const deleteComponent = (index) => {
  components.value.splice(index, 1)
  if (selectedIndex.value === index) {
    selectedIndex.value = null
  } else if (selectedIndex.value > index) {
    selectedIndex.value--
  }
}

// 复制组件
const copyComponent = (index) => {
  const component = JSON.parse(JSON.stringify(components.value[index]))
  component.id = idCounter.value++
  components.value.splice(index + 1, 0, component)
  selectComponent(index + 1)
}

// 添加表格列
const addTableColumn = () => {
  if (currentComponent.value && currentComponent.value.type === 'table') {
    currentComponent.value.data.columns.push({
      prop: `field_${Date.now()}`,
      label: '新列'
    })
  }
}

// 删除表格列
const deleteTableColumn = (index) => {
  if (currentComponent.value && currentComponent.value.type === 'table') {
    currentComponent.value.data.columns.splice(index, 1)
  }
}

// 添加选择器选项
const addSelectOption = () => {
  if (currentComponent.value && currentComponent.value.type === 'select') {
    currentComponent.value.config.options.push({
      label: '新选项',
      value: `value_${Date.now()}`
    })
  }
}

// 删除选择器选项
const deleteSelectOption = (index) => {
  if (currentComponent.value && currentComponent.value.type === 'select') {
    currentComponent.value.config.options.splice(index, 1)
  }
}

// 添加自定义属性
const addCustomProp = () => {
  if (currentComponent.value && currentComponent.value.type.startsWith('custom-')) {
    currentComponent.value.config.customProps.push({
      key: '',
      value: ''
    })
  }
}

// 删除自定义属性
const deleteCustomProp = (index) => {
  if (currentComponent.value && currentComponent.value.type.startsWith('custom-')) {
    currentComponent.value.config.customProps.splice(index, 1)
  }
}

// 生成代码
const generateCode = () => {
  ElMessage.success('代码生成成功')
  console.log('Generated Config:', JSON.stringify(components.value, null, 2))
}

// 预览页面
const previewPage = () => {
  previewVisible.value = true
}

// 保存配置
const saveConfig = () => {
  ElMessage.success('配置保存成功')
}
</script>

<style scoped>
.low-code-designer {
  height: 100%;
  padding: 20px;
}

.components-panel {
  background: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}

.component-list {
  padding: 10px;
}

.component-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: grab;
  transition: all 0.3s;
}

.component-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.component-item el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.canvas-panel {
  padding: 0 20px;
}

.design-canvas {
  min-height: 500px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  position: relative;
  padding: 20px;
}

.empty-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #909399;
}

.empty-canvas el-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.canvas-component {
  position: relative;
  margin-bottom: 20px;
  padding: 30px 15px 15px 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.canvas-component.active {
  border-color: #409eff;
  box-shadow: 0 0 0 2px #409eff20;
}

.component-toolbar {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 5px;
}

.component-toolbar el-icon {
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
}

.component-toolbar el-icon:hover {
  color: #409eff;
}

.component-toolbar .drag-handle {
  cursor: move;
}

.properties-panel {
  background: #f5f7fa;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions {
  display: flex;
  gap: 10px;
}

.no-selection {
  text-align: center;
  padding: 20px;
  color: #909399;
}
</style>